<template>
  <div class="all">
    <!-- <el-button @click="addUserByList">添加</el-button> -->
    <div class="container">
      <div class="container-headers">
        <div class="containerName">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">产品名称</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">相关人员</div>
            </el-col>

            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-button type="primary" class="buttonStyles" @click="onExport"
                  >数据同步</el-button
                >
                <el-button
                  type="primary"
                  @click="reset"
                  class="topBtns buttonStyle"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  class="topBtns buttonStyle"
                  @click="getCategory"
                  >搜索</el-button
                >
                <el-col :span="13" class="topBtns">
                  <el-select
                    v-model="productvalue"
                    class="topBtns"
                    multiple
                    filterable
                    collapse-tags
                    placeholder="请选择产品名称搜索"
                  >
                    <el-option
                      v-for="(item, index) in productList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="addData">
          <!-- <el-button type="primary" class="addBtnInside" @click="ToADD"
            >添加</el-button
          > -->
          <el-button
            type="primary"
            class="addBtnInside"
            @click="addUserAndProduct"
            >添加</el-button
          >
          <el-button type="primary" class="addBtnInside" @click="onUnbund"
            >批量解绑</el-button
          >
        </div>
      </div>

      <div class="containerButtom">
        <div
          v-for="(item, index) in ProductSetGetAllList"
          :key="index"
          class="containerButtomList"
        >
          <el-row :gutter="5">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-input
                  v-model="item.productName"
                  placeholder="请输入内容"
                  disabled
                ></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <div class="containerButtomListCenter">
                  <!-- <span :v-model="item.userString"></span> -->
                  <p>{{ item.userString }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  @click.stop="onActionConfirm(item.id, modalType.delete)"
                  class="buttonStyle"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  @click.stop="toView(item.productId)"
                  class="buttonStyle"
                  >查看</el-button
                >
                <!-- @click.stop="clickBian(item.productId, index)" -->
                <el-button
                  type="primary"
                  @click="editRowUserClick(item.productId, item.id)"
                  class="buttonStyle"
                  >编辑</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 添加产品弹出框 -->
    <el-dialog
      :visible.sync="relevantPersonnelThree"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="cancelThree"
      class="reciverDialog"
    >
      <!-- relevantPersonnelThree -->
      <el-table
        height="360"
        ref="multipleSelectionThree"
        :data="
          productList.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        :row-key="(row) => row.id"
        @selection-change="handleSelectionChangeThree"
        tooltip-effect="dark"
      >
        <el-table-column
          label="C2表"
          align="right"
          label-class-name="searchHead"
        >
          <template slot="header">
            <el-input
              v-model="search"
              clearable
              style="width: 220px"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <el-table-column type="selection" row-key="id" :reserve-selection="true">
          </el-table-column>
          <el-table-column prop="name" label="产品名称"> </el-table-column>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelThree">取消</el-button>
        <el-button type="primary" @click="confirmThree">确认</el-button>
      </span>
    </el-dialog>
    <!-- 查看相关人员弹出框 -->
    <el-dialog
      :visible.sync="relevantPersonnelFour"
      :close-on-click-modal="false"
      class="reciverDialog"
      width="70%"
    >
      <el-table height="660" ref="multipleSelectionTwos" :data="staffList">
        <el-table-column prop="userName" label="OA号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="department" label="部门"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 批量解绑弹出框 -->
    <el-dialog
      :visible.sync="unbundlingRelevant"
       :before-close="cancelUnbundling"
      :destroy-on-close="true"
      class="reciverDialog"
      :close-on-click-modal="false"
      width="80%"
    >
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-between">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="searchNameClass">
              产品名称
              <!-- <el-input v-model="searchName" placeholder="输入关键字搜索"><el-button type="primary" style="background: #409EFF;color:#fff;" slot="append" @click="searchIDforNeed" icon="el-icon-search">查询</el-button></el-input> -->
            </div>
            <div class="radioGroup">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <div style="margin: 15px 0"></div>
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox
                  v-for="city in cities"
                  :label="city.id"
                  :key="city.id"
                  >{{ city.productName }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div class="searchNameClass">
              <el-row>
                <el-col :xs="16" :sm="17">
                  <el-form
                    :inline="true"
                    :model="SelectConditionForm"
                    ref="SelectConditionForm"
                  >
                    <el-form-item prop="userName">
                      <el-input
                        placeholder="请输入OA号"
                        v-model="SelectConditionForm.userName"
                        clearable
                        oninput="value=value.replace(/[^\d]/g,'')"
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="name">
                      <el-input
                        placeholder="请输入姓名"
                        v-model="SelectConditionForm.name"
                        clearable
                        @input="onInput()"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>

                <el-col :xs="8" :sm="7">
                  <el-button
                    @click="resets"
                    class="myfeed"
                    type="primary"
                    size="small"
                    >重置</el-button
                  >
                  <el-button
                    @click="onSearchKuang()"
                    class="myfeed"
                    type="primary"
                    size="small"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
            </div>
            <div class="radioGroup">
              <el-table
                height="480"
                border
                ref="releaseTableRef"
                :data="feedBackList"
                tooltip-effect="dark"
                :row-key="(row) => row.id"
              >
                <el-table-column width="60px" align="center">
                  <!-- label非常重要 -->
                  <template v-slot="props">
                    <el-radio
                      v-model="adminRole"
                      :label="props.row.id"
                      @change="radioChange(props.row)"
                      >{{ '' }}</el-radio
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="userName" label="OA号">
                </el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="department" label="部门">
                </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
              </el-table>
            </div>
            <div class="paginationClock">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryinfo.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryinfo.pageRow"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUnbundling">取消</el-button>
        <el-button type="primary" @click="confirmUnbundling">确认</el-button>
      </span>
    </el-dialog>
    <CommonDialog ref="CommonDialog" />
    <!-- 添加按钮弹出框 -->
    <el-dialog
      :visible.sync="deladdRelevant"
      @close="deladd"
      :destroy-on-close="true"
      class="reciverDialog"
      :close-on-click-modal="false"
      width="70%"
    >
      <div class="addDiv">
        <div class="addDivTop">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <span class="yixuan">已选产品列表：</span>
                <el-button
                  type="primary"
                  class="addBtns"
                  size="mini"
                  @click="clickAddData"
                  >添加产品</el-button
                >
                <div class="addDataLeftList">
                  <p v-for="(item, index) in ProductListTwo" :key="index">
                    <span>{{ item.name }}</span>
                    <span
                      class="el-icon-circle-close"
                      @click.stop="clickDeletes(index, 'ProductListTwo')"
                    ></span>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div class="addDataCenter">
                  <span class="yixuan">已选人员列表：</span>
                  <el-button
                    type="primary"
                    class="addBtns"
                    size="mini"
                    @click="ClickAdd"
                    >添加人员</el-button
                  >
                  <div class="addDataLeftList">
                    <el-tag
                      v-for="(tag, index) in UserGetAllUser"
                      :key="index"
                      closable
                      @close="handleCloses(tag)"
                    >
                      {{ tag.name }}
                    </el-tag>
                    <!-- <p
                                            v-for="(
                                                item, index
                                            ) in UserGetAllUser"
                                            :key="index"
                                        >
                                            <span>{{ item.name }}</span>
                                            <span
                                                class="el-icon-circle-close"
                                                @click.stop="
                                                    clickDeletes(
                                                        index,
                                                        'UserGetAllUser'
                                                    )
                                                "
                                            ></span>
                                        </p> -->
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onAdd" style="float: right"
            >添加</el-button
          >
          <el-button @click="deladd" style="float: right; margin-right: 20px"
            >取消</el-button
          >
        </span>
      </div>
    </el-dialog>
    <!-- 添加人员甜出框 -->
    <el-dialog
      :visible.sync="relevantPersonnelOne"
      @close="cancelOne"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="reciverDialog"
    >
      <el-row>
        <el-col :xs="16" :sm="17" :md="18" :lg="20" :xl="20">
          <el-form
            :inline="true"
            :model="SelectConditionForm"
            ref="SelectConditionForm"
          >
            <el-form-item prop="userName">
              <el-input
                placeholder="请输入OA号"
                v-model="SelectConditionForm.userName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                placeholder="请输入姓名"
                v-model="SelectConditionForm.name"
                clearable
                @input="onInput()"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="4">
          <el-button @click="resets" class="myfeed" type="primary" size="small"
            >重置</el-button
          >
          <el-button
            @click="onSearchKuang()"
            class="myfeed"
            type="primary"
            size="small"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-table
        height="410"
        ref="multipleSelectionOnes"
        class="peraonalClass"
        :data="feedBackList"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChangeOne"
        tooltip-effect="dark"
      >
        <el-table-column type="selection" row-key="id" :reserve-selection="true">
        </el-table-column>
        <el-table-column prop="userName" label="OA号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="department" label="部门"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
      </el-table>
      <div class="paginationClock">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryinfo.pageRow"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOne">取消</el-button>
        <el-button type="primary" @click="confirmOne">确认</el-button>
      </span>
    </el-dialog>
    <!-- 编辑人员弹出框 -->
    <el-dialog
      :visible.sync="relevantPersonnelTwo"
      @close="cancelTwo"
      :destroy-on-close="true"
      class="reciverDialog"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :xs="16" :sm="17" :md="18" :lg="20" :xl="20">
          <el-form
            :inline="true"
            :model="SelectConditionForms"
            ref="SelectConditionForms"
          >
            <el-form-item prop="userName">
              <el-input
                placeholder="请输入OA号"
                v-model="SelectConditionForms.userName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                placeholder="请输入姓名"
                v-model="SelectConditionForms.name"
                clearable
                @input="onInput()"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="4">
          <el-button @click="resetss" class="myfeed" type="primary" size="small"
            >重置</el-button
          >
          <el-button
            @click="onSearchKuangs()"
            class="myfeed"
            type="primary"
            size="small"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-table
        height="410"
        ref="multipleSelectionTwotr"
        :data="feedBackLists"
        :row-key="(row) => row.id"
        @selection-change="handleSelectionChangeTwo"
        tooltip-effect="dark"
      >
        <el-table-column type="selection" row-key="id" :reserve-selection="true">
        </el-table-column>
        <el-table-column prop="userName" label="OA号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="department" label="部门"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
      </el-table>

      <div class="paginationClock">
        <el-pagination
          background
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"
          :current-page="queryinfos.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryinfos.pageRow"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumbers"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelTwo">取消</el-button>
        <el-button type="primary" @click="confirmTwo">确认</el-button>
      </span>
    </el-dialog>
    <!-- 编辑按钮 -->
    <el-dialog
      :visible.sync="bianjiRelevant"
      @close="isBianji"
      :destroy-on-close="true"
      class="reciverDialog"
      :close-on-click-modal="false"
      width="50%"
      top="10vh"
    >
      <div>
        <span class="yixuan">已选人员列表：</span>
        <el-button
          type="primary"
          class="addBtns"
          size="mini"
          @click="ClickEidot"
          >编辑人员</el-button
        >
        <div class="addDataLeftList">
          <el-tag
            v-for="(tag, index) in dynamicTags"
            :key="index"
            closable
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Save" style="float: right"
          >确认</el-button
        >
        <el-button @click="isBianji" style="float: right; margin-right: 20px"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :title="isEdit?'编辑':'添加'"
      :visible.sync="editRowDialogVisable"
      width="80%"
      top="5vh"
      :before-close="handleEditRowClose"
    >
      <div :class="isEdit ? 'modal-dept' : 'modal-dept-add'" id="sign">
        <!-- 左侧分页列表 -->
        <div class="modal-top">
          <div v-show="!isEdit" class="left">
            <el-card shadow="never" style="height:calc(100% - 30px);">
                <div slot="header" class="clearfix">
                    <h2 style="color:#909399;">已选择产品</h2>
                </div>
              <div class="tags_box">
                  <el-empty v-if="editRowProductSelect.length<1" description="暂无选择产品"></el-empty>
                <el-tag
                  v-for="(tag, ind) in editRowProductSelect"
                  @close="handleProductClose(tag)"
                  closable
                  :key="ind"
                  >{{ tag.name }}</el-tag
                >
              </div>
            </el-card>
          </div>
          <div class="right">

            <el-card shadow="never" style="height:calc(100% - 30px);">
                 <div slot="header" class="clearfix">
                    <h2  style="color:#909399;">已选择人员</h2>
                </div>
              <div class="tags_box">
                  <el-empty v-if="editRowLeftSelect&&editRowLeftSelect.length<1" description="暂无选择人员"></el-empty>
                <el-tag
                  v-for="(tag, ind) in editRowLeftSelect"
                  @close="handleEditClose(tag)"
                  closable
                  :key="ind"
                  >{{ tag.name }}</el-tag
                >
              </div>
            </el-card>
          </div>
        </div>
        <div class="modal-bottom">
          <div v-show="!isEdit" class="left">
            <el-table
              class="table_bg"
              height="410"
              ref="productTableRef"
              :data="
                productList.filter(
                  (data) =>
                    !searchProuductWords ||
                    data.name
                      .toLowerCase()
                      .includes(searchProuductWords.toLowerCase())
                )
              "
              :header-cell-class-name="cellClass"
               :row-key="getRowKeys"
              @select="selectProductRow"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column
                label="C2表"
                align="right"
                label-class-name="searchHead"
              >
                <template slot="header">
                  <el-row type="flex" justify="space-between">
                    <el-col style="text-align:left;">
                      <h2>请选择产品</h2>
                    </el-col>
                    <el-col>
                      <el-input
                        v-model="searchProuductWords"
                        clearable
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                    </el-col>
                  </el-row>
                </template>
                <el-table-column type="selection" row-key="id" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="name" label="产品名称">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="right">
            <div>
              <div>
                <el-table
                  class="table_bg"
                  ref="editTableRef"
                  height="410"
                  :header-cell-class-name="cellClass"
                  :row-key="getRowKeys"
                  :data="
                    editRowTableData.nowPageList2
                      | dataslice(listQuery.page, listQuery.limit)
                  "
                  tooltip-effect="dark"
                  style="width: 100%"
                  @select="curSelect"
                >
                  <el-table-column>
                    <template slot="header">
                      <el-row type="flex" justify="space-between">
                        <el-col style="text-align:left;">
                          <h2>请选择人员</h2>
                        </el-col>
                        <el-col>
                          <el-input
                            v-model="searchWords"
                            size="mini"
                            placeholder="输入关键字搜索"
                          />
                        </el-col>
                      </el-row>
                    </template>
                    <el-table-column
                      type="selection"
                      row-key="id"
                      :reserve-selection="true"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="userName"
                      column-key="userName"
                      label="OA号"
                    >
                    </el-table-column>
                    <el-table-column prop="name" column-key="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="department" label="部门">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱">
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="editRowTableData.total > 0"
                  :total="editRowTableData.total"
                  :page.sync="listQuery.page"
                  :limit.sync="listQuery.limit"
                  @pagination="getList"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧已选中的列表 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleDialog">取 消</el-button>
        <el-button type="primary" @click="saveUserOrProduct"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { Product, User, ApiRequest } from '@/api/setting/service.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import DataRefresh from './dataRefresh.vue'
import FilterTrans from '@/utils/paramsFiler'
export default {
    name: 'productSettings',
    components: {
        CommonDialog,
        Pagination
    },
    data() {
        const EFilterOprator = FilterTrans.EFilterOprator
        return {
            isEdit: false,
            listQuery: {
                page: 1,
                limit: 10
            },
            dialogData: {
                productId: '',
                id: ''
            },
            searchWords: '',
            searchProuductWords: '',
            deladdRelevant: false,
            editRowDialogVisable: false,
            editRowTableData: {
                currentPage: 1,
                list: [],
                nowPageList: [],
                nowPageList2: [],
                total: 0,
                pageSize: 10,
                pageNum: 1
            },
            openItem: [],
            currentEditPage: 1,
            pageEditSize: 10,
            editTotal: 0,
            nowPage: {
                currentPage: this.currentEditPage,
                pageSize: this.pageEditSize
            },
            editRowLeftSelect: [],
            editRowProductSelect: [],
            editRowRight: [],

            isBian: false,
            tableData: [],
            tableDatas: [],
            loadDatas: [],
            multipleSelection: [],
            userTableDataOne: [],
            userTableDataTwo: [],
            adminRole: '',
            checkAll: false,
            checkedCities: [],
            cities: [],
            isIndeterminate: true,
            searchName: '',
            // 选中的数据
            selectedRows: [],
            // 空元素，用于撑开table的高度
            vEle: undefined,
            // 是否全选
            isSelectedAll: false,
            unbundlingRelevant: false,
            // 搜索框
            search: '',
            // 新建 人员弹出框
            relevantPersonnelOne: false,
            // 编辑 人员弹出框
            relevantPersonnelTwo: false,
            // 产品列表
            productList: [],
            bianjiRelevant: false,
            // 所选的产品名称列表
            productvalue: [],
            // 所有人员信息数据
            UserGetAllUser: [],
            // 异步获取产品设置的所有数据
            ProductSetGetAllList: [],
            // 点击所有数据中的某一条
            Expansion: '',
            // 删除弹出框
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'clickDelete'
                }
            },
            // 人员信息列表
            userTableData: [],
            // 新建 所选人员
            multipleSelectionOneCopy: [],
            // 编辑 所选人员
            multipleSelectionTwoCopy: [],
            // 所选产品
            multipleSelectionThreeCopy: [],
            // 确定产品列表
            ProductListTwo: [],
            // 产品弹出框
            relevantPersonnelThree: false,
            // 查看弹出框
            relevantPersonnelFour: false,
            // 查看人员列表
            staffList: [],
            userList: [],
            // 标签列表
            dynamicTags: [],
            SelectConditionForm: {
                department: '',
                email: '',
                id: '',
                name: '', // 营销项目名称
                userName: ''
            },
            searchCondition: [
                {
                    field: 'department',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'email',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'id',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'name',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'userName',
                    operator: EFilterOprator.Like
                }
            ],
            queryinfo: {
                pageIndex: 1,
                pageRow: 50
            },
            feedBackList: [],
            totalNumber: null,
            SelectConditionForms: {
                department: '',
                email: '',
                id: '',
                name: '', // 营销项目名称
                userName: ''
            },
            searchConditions: [
                {
                    field: 'department',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'email',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'id',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'name',
                    operator: EFilterOprator.Like
                },
                {
                    field: 'userName',
                    operator: EFilterOprator.Like
                }
            ],
            queryinfos: {
                pageIndex: 1,
                pageRow: 50
            },
            feedBackLists: [],
            totalNumbers: null
        }
    },
    filters: {
        filtersTable(v) {
            return JSON.stringify(v)
        },
        dataslice(array, page, limit) {
            console.log(array)
            const offset = (page - 1) * 10
            const newdata =
        offset + limit >= array.length
            ? array.slice(offset, array.length)
            : array.slice(offset, offset + limit)
            return newdata
        }
    },
    watch: {
        nowPage(newVal, oldVal) {
            this.listQuery.page = newVal.currentPage
            this.listQuery.limit = newVal.pageSize
        },
        searchWords: function() {
            this.fliterData()
            // this.editTableSelection(this.editRowLeftSelect)
        }
    },
    mounted() {
        this.getCategory()
        this.getUserList()
        this.getProductList()
    },
    methods: {
        saveUserOrProduct() {
            if (!this.isEdit) {
                this.saveUserAndProduct()
            } else {
                this.SaveUserOnly()
            }
        },
        async saveUserAndProduct() {
            // editRowProductSelect editRowLeftSelect
            if (this.editRowLeftSelect.length > 0 && this.editRowProductSelect.length > 0) {
                const userId = []
                for (const item of this.editRowLeftSelect) {
                    userId.push(item.id)
                }
                const productvalue = []
                for (const item of this.editRowProductSelect) {
                    productvalue.push(item.id)
                }
                const sss = {
                    productIds: productvalue,
                    userIds: userId
                }
                try {
                    const result = await Product.ProductSetInsertBatchAsync(sss)
                    if (result.success) {
                        this.cancleDialog()
                        this.getCategory()
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('请选择产品名称或相关人员')
            }
        },
        async SaveUserOnly() {
            this.currentPage = 1
            const userId = []
            for (const item of this.editRowLeftSelect) {
                userId.push(item.id)
            }
            const sss = {
                id: this.dialogData.id,
                productId: this.dialogData.productId,
                userIds: userId
            }
            console.log(sss)
            try {
                const result = await Product.ProductSetUpdateAsync(sss)
                if (result.success) {
                    this.getCategory()
                    this.cancleDialog()
                    this.$message.success('保存成功！')
                } else {
                    this.getCategory()
                    this.cancleDialog()
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.getCategory()
                this.cancleDialog()
                this.$message.error('服务器异常')
            }
        },
        addUserAndProduct() {
            this.editRowDialogVisable = true
            this.isEdit = false
            this.getEditAllTableData()
        },
        getList() {
            this.fliterData()
            this.editTableSelection(this.editRowLeftSelect)
        },
        fliterData() {
            const search = this.searchWords
            if (search) {
                this.editRowTableData.nowPageList2 = this.editRowTableData.list.filter(
                    (data) => {
                        return Object.keys(data).some((key) => {
                            return (
                                String(data[key])
                                    .toLowerCase()
                                    .indexOf(search) > -1
                            )
                        })
                    }
                )
                this.editRowTableData.total = this.editRowTableData.nowPageList2.length
                console.log(
                    'this.editRowTableData.nowPageList2',
                    this.editRowTableData.nowPageList2
                )
                return this.editRowTableData.nowPageList2
            }
            this.editRowTableData.nowPageList2 = this.editRowTableData.list
            this.editRowTableData.total = this.editRowTableData.nowPageList2.length

            return this.editRowTableData.list
        },

        cellClass(row) {
            if (row.columnIndex === 0) {
                return 'disableheadselection'
            }
        },
        handleEditClose(tag) {
            this.editRowLeftSelect.splice(this.editRowLeftSelect.indexOf(tag), 1)
            this.editTableSelection(this.editRowLeftSelect)
        },
        handleProductClose(tag) {
            this.editRowProductSelect.splice(
                this.editRowProductSelect.indexOf(tag),
                1
            )
            this.editProductSelection(this.editRowProductSelect)
        },

        changePage() {
            const obj = {
                currentPage: this.listQuery.page,
                pageSize: this.listQuery.limit
            }
            const currentPage = obj.currentPage
            const pageSize = obj.pageSize
            const data = JSON.parse(JSON.stringify(this.editRowTableData.list))
            const begin = (currentPage - 1) * pageSize
            const end = currentPage * pageSize
            this.editRowTableData.nowPageList2 = data.slice(begin, end)
        },
        handleEditRowClose() {
            this.dialogData = {
                productId: '',
                id: ''
            }
            this.editRowTableData.nowPageList2 = []
            this.editRowTableData.list = []
            this.editRowTableData.total = 0
            this.editRowLeftSelect = []

            if (!this.isEdit) {
                this.$refs.productTableRef.clearSelection()
                this.editRowProductSelect = []
                this.searchProuductWords = ''
            }
            this.searchWords = ''
            // this.$refs.editTableRef.clearSelection()
            this.editRowDialogVisable = false
            this.isEdit = false
        },
        cancleDialog() {
            this.dialogData = {
                productId: '',
                id: ''
            }
            this.editRowTableData.nowPageList2 = []
            this.editRowTableData.list = []
            this.editRowTableData.total = 0
            this.editRowLeftSelect = []
            if (!this.isEdit) {
                this.$refs.productTableRef.clearSelection()
                this.editRowProductSelect = []
                this.searchProuductWords = ''
            }
            this.searchWords = ''
            // this.$refs.editTableRef.clearSelection()
            this.isEdit = false
            this.editRowDialogVisable = false
        },
        editRowUserClick(productId, id) {
            this.isEdit = true
            this.editRowDialogVisable = true

            console.log('val', productId)
            console.log('id', id)
            this.dialogData.productId = productId
            this.dialogData.id = id
            this.getEditTableData(productId)
            this.getEditAllTableData()

            this.fliterData()
        },
        async getEditAllTableData() {
            try {
                const result = await User.UserGetAllUserAsync()
                if (result.success) {
                    this.editRowTableData.list = result.data
                    this.editRowTableData.total = result.data.length
                    this.editRowTableData.nowPageList = this.editRowTableData.list.slice(
                        0,
                        10
                    )
                    this.editRowTableData.nowPageList2 = result.data
                    this.$nextTick(() => {
                        this.editTableSelection(this.editRowLeftSelect)
                    })
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        async getEditTableData(val) {
            try {
                const result = await Product.GetListItemAsync({ id: val })
                if (result.success) {
                    if (result.data && result.data.length > 0) {
                        this.editRowLeftSelect = result.data
                        this.editTableSelection(result.data)
                    } else {
                        this.editRowLeftSelect = []
                    }
                } else {
                    this.editRowLeftSelect = []
                    this.$message.error(result.message || '系统异常，请稍后再试！')
                }
            } catch (err) {
                this.editRowLeftSelect = []
                this.$message.error('服务器异常3333')
            }
        },
        editProductSelection(rows) {
            console.log(rows)
            this.$nextTick(() => {
                this.$refs.productTableRef.clearSelection()
                if (!rows || rows.length === 0) {
                    return
                }
                rows.forEach((row) => {
                    // 检测是否存在
                    const index = this.getIndex(row.id)
                    // 不存在
                    if (index === -1) {
                        return
                    }
                    // 存在，遍历循环时把el-table此行的selection置为true
                    this.$refs.productTableRef.toggleRowSelection(
                        this.productList[index],
                        true
                    )
                })
            })
        },
        editTableSelection(rows) {
            console.log(rows)
            this.$nextTick(() => {
                this.$refs.editTableRef.clearSelection()
                if (!rows || rows.length === 0) {
                    return
                }
                rows.forEach((row) => {
                // 检测是否存在
                    const index = this.getIndex(row.id)
                    // 不存在
                    if (index === -1) {
                        return
                    }
                    console.log('index', index)
                    // 存在，遍历循环时把el-table此行的selection置为true
                    this.$nextTick(() => {
                        this.$refs.editTableRef.toggleRowSelection(
                            this.editRowTableData.nowPageList2[index],
                            true
                        )
                    })
                })
            })
        },
        selectProductRow(selection, row) {
            if (this.editRowProductSelect.length > 0) {
                // 判断是否存在 若存在，删除  若未存在，则添加
                const flag = this.editRowProductSelect.some((it) => row.id === it.id)
                if (flag) {
                    // 存在，再次点击则是取消选中
                    this.editRowProductSelect.map((it, index) => {
                        if (row.id === it.id) {
                            this.editRowProductSelect.splice(index, 1)
                        }
                    })
                } else {
                    // 不存在，添加至选中数组
                    this.editRowProductSelect = this.editRowProductSelect.concat(row)
                }
            } else {
                // 当选中数组为空时，直接添加
                this.editRowProductSelect.push(row)
            }
        },
        // 当前选择的小区
        curSelect(selection, row) {
            if (this.editRowLeftSelect.length > 0) {
                // 判断是否存在 若存在，删除  若未存在，则添加
                const flag = this.editRowLeftSelect.some((it) => row.id === it.id)
                if (flag) {
                    // 存在，再次点击则是取消选中
                    this.editRowLeftSelect.map((it, index) => {
                        if (row.id === it.id) {
                            this.editRowLeftSelect.splice(index, 1)
                        }
                    })
                } else {
                    // 不存在，添加至选中数组
                    this.editRowLeftSelect = this.editRowLeftSelect.concat(row)
                }
            } else {
                // 当选中数组为空时，直接添加
                this.editRowLeftSelect.push(row)
            }
        },
        getIndex(selectId) {
            let index = -1
            for (let i = 0; i < this.editRowTableData.list.length; i++) {
                const item = this.editRowTableData.list[i]
                if (item.id === selectId) {
                    index = i
                    continue
                }
            }
            return index
        },
        // async clickBian(val, index) {
        //     const loading = this.$loading({
        //         lock: true,
        //         text: '数据加载中',
        //         spinner: 'el-icon-loading',
        //         background: 'rgba(0, 0, 0, 0.7)'
        //     })
        //     this.Expansion = index
        //     try {
        //         const result = await Product.GetListItemAsync({ id: val })
        //         if (result.success) {
        //             loading.close()
        //             this.bianjiRelevant = true
        //             this.dynamicTags = result.data
        //         } else {
        //             this.$message.error(result.message)
        //         }
        //     } catch (err) {
        //         this.$message.error('服务器异常')
        //     }
        // },
        isBianji() {
            this.bianjiRelevant = false
        },
        handleSizeChange(_val) {
            this.queryinfo.pageRow = _val
            this.onSearch()
        },

        /**
     * @description: 点击切换页码
     * @param {Number} _val 页码
     */
        handleCurrentChange(_val) {
            // console.log(_val)
            this.queryinfo.pageIndex = _val
            this.onSearch()
        },
        resets() {
            this.queryinfo.pageIndex = 1
            this.$refs['SelectConditionForm'].resetFields()
        },
        handleSizeChanges(_val) {
            this.queryinfos.pageRow = _val
            this.onSearchs()
        },

        /**
     * @description: 点击切换页码
     * @param {Number} _val 页码
     */
        handleCurrentChanges(_val) {
            // console.log(_val)
            this.queryinfos.pageIndex = _val
            this.onSearchs()
        },
        resetss() {
            this.queryinfos.pageIndex = 1
            this.$refs['SelectConditionForms'].resetFields()
        },
        ToADD() {
            this.deladdRelevant = true
        },
        onSearch() {
            this.filter = FilterTrans.buildPageRequest(
                this.SelectConditionForm,
                this.searchCondition
            )
            this.getFeedBackList()
        },
        async getFeedBackList() {
            this.feedBackList = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const data = this.handleForm(this.filter)
                const result = await User.UserGetPageAsync(data)
                if (result.success) {
                    loading.close()
                    this.feedBackList = result.data.data
                    this.totalNumber = result.data.total
                    // this.isDynamicTag()
                } else {
                    loading.close()
                    this.feedBackList = []
                    this.totalNumber = 0
                }
            } catch (err) {
                loading.close()
                this.feedBackList = []
                this.totalNumber = 0
                console.log(err)
            }
        },
        isDynamicTag() {
            console.log(this.UserGetAllUser)
            console.log(this.feedBackList)
            const data = JSON.parse(JSON.stringify(this.UserGetAllUser))
            const data1 = JSON.parse(JSON.stringify(this.feedBackList))
            this.$nextTick(() => {
                data.forEach((element) => {
                    const selectIndex = data1.findIndex((_item) => {
                        return _item.id == element.id
                    })
                    console.log('------------------>', selectIndex)
                    if (selectIndex != -1) {
                        if (data[selectIndex]) {
                            this.$refs.multipleSelectionOnes.toggleRowSelection(
                                this.feedBackList[selectIndex]
                            )
                        }
                    }
                })
            })
        },
        handleForm(_filter) {
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'userName'
                }
            ]

            filter.pageIndex = this.queryinfo.pageIndex
            filter.pageRow = this.queryinfo.pageRow
            console.log(filter)
            return filter
        },
        onSearchKuang() {
            this.filter = FilterTrans.buildPageRequest(
                this.SelectConditionForm,
                this.searchCondition
            )
            this.getFeedBackListKuang()
        },
        async getFeedBackListKuang() {
            this.feedBackList = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const data = this.handleFormKuang(this.filter)
                const result = await User.UserGetPageAsync(data)
                if (result.success) {
                    loading.close()
                    this.feedBackList = result.data.data
                    this.totalNumber = result.data.total
                    this.isDynamicTag()
                } else {
                    loading.close()
                    this.feedBackList = []
                    this.totalNumber = 0
                }
            } catch (err) {
                loading.close()
                this.feedBackList = []
                this.totalNumber = 0
                console.log(err)
            }
        },
        handleFormKuang(_filter) {
            this.queryinfo.pageIndex = 1
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'userName'
                }
            ]

            filter.pageIndex = this.queryinfo.pageIndex
            filter.pageRow = this.queryinfo.pageRow
            return filter
        },
        ClickEidot() {
            this.queryinfos.pageIndex = 1
            this.relevantPersonnelTwo = true
            this.onSearchs()
        },
        onSearchs() {
            this.filter = FilterTrans.buildPageRequest(
                this.SelectConditionForms,
                this.searchConditions
            )
            this.getFeedBackLists()
        },
        async getFeedBackLists() {
            this.feedBackLists = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const data = this.handleForms(this.filter)
                const result = await User.UserGetPageAsync(data)
                if (result.success) {
                    loading.close()
                    this.feedBackLists = result.data.data
                    this.totalNumbers = result.data.total
                    this.isDynamicTags()
                } else {
                    loading.close()
                    this.feedBackLists = []
                    this.totalNumbers = 0
                }
            } catch (err) {
                loading.close()
                this.feedBackLists = []
                this.totalNumbers = 0
                console.log(err)
            }
        },
        isDynamicTags() {
            console.log(this.dynamicTags)
            console.log(this.feedBackLists)
            const data = JSON.parse(JSON.stringify(this.dynamicTags))
            const data1 = JSON.parse(JSON.stringify(this.feedBackLists))
            this.$nextTick(() => {
                data.forEach((element) => {
                    const selectIndex = data1.findIndex((_item) => {
                        return _item.id == element.id
                    })
                    console.log(selectIndex)
                    if (selectIndex != -1) {
                        console.log(data[selectIndex])
                        if (data[selectIndex]) {
                            this.$refs.multipleSelectionTwotr.toggleRowSelection(
                                this.feedBackLists[selectIndex]
                            )
                        }
                    }
                })
            })
        },
        handleForms(_filter) {
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'userName'
                }
            ]

            filter.pageIndex = this.queryinfos.pageIndex
            filter.pageRow = this.queryinfos.pageRow
            console.log(filter)
            return filter
        },
        onSearchKuangs() {
            this.filter = FilterTrans.buildPageRequest(
                this.SelectConditionForms,
                this.searchConditions
            )
            this.getFeedBackListKuangs()
        },
        async getFeedBackListKuangs() {
            this.feedBackLists = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const data = this.handleFormKuangs(this.filter)
                const result = await User.UserGetPageAsync(data)
                if (result.success) {
                    loading.close()
                    this.feedBackLists = result.data.data
                    this.totalNumbers = result.data.total
                    this.isDynamicTags()
                } else {
                    loading.close()
                    this.feedBackLists = []
                    this.totalNumbers = 0
                }
            } catch (err) {
                loading.close()
                this.feedBackLists = []
                this.totalNumbers = 0
                console.log(err)
            }
        },
        handleFormKuangs(_filter) {
            this.queryinfos.pageIndex = 1
            const filters = FilterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.orderConditions = [
                {
                    sortDirection: '1',
                    sortField: 'userName'
                }
            ]

            filter.pageIndex = this.queryinfos.pageIndex
            filter.pageRow = this.queryinfos.pageRow
            return filter
        },

        deladd() {
            this.ProductListTwo = []
            this.UserGetAllUser = []
            this.deladdRelevant = false
        },
        /**
     * @description:点击数据刷新按钮
     */
        async onExport() {
            const loading = this.$loading({
                lock: true,
                text: '数据刷新中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const result = await ApiRequest.ApiRequestInsertAsync()
                if (result.success) {
                    loading.close()
                    this.getCategory()
                    this.getUserList()
                    this.getProductList()
                    this.$message.success('数据刷新成功')
                } else {
                    loading.close()
                    this.$message.error(result.message)
                }
            } catch (err) {
                loading.close()
                this.$message.error('服务器异常')
            }
        },
        handleCheckAllChange(val) {
            console.log(val)
            const userId = []
            for (const item of this.cities) {
                userId.push(item.id)
            }
            this.checkedCities = val ? userId : []
            this.isIndeterminate = false
        },
        handleCheckedCitiesChange(value) {
            console.log(value)
            const checkedCount = value.length
            this.checkAll = checkedCount === this.cities.length
            this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
        },
        searchIDforNeed() {
            console.log(this.searchName)
            const data = this.userTableData
            this.userList = JSON.parse(JSON.stringify(data))
            this.userList = this.userList.filter(
                (data) =>
                    !this.searchName ||
          data.name.toLowerCase().includes(this.searchName.toLowerCase())
            )
            console.log(this.userList)
        },
        onInput() {
            this.$forceUpdate()
        },
        onUnbund() {
            this.unbundlingRelevant = true
            this.onSearch()
            // const data = this.userTableData
            // this.userList = JSON.parse(JSON.stringify(data))
            // console.log(this.userList)
        },
        cancelUnbundling() {
            console.log('222')
            this.unbundlingRelevant = false
            this.queryinfo = {
                pageIndex: 1,
                pageRow: 50
            }
            this.totalNumber = 0
            this.feedBackList = []
            this.SelectConditionForm = {
                department: '',
                email: '',
                id: '',
                name: '', // 营销项目名称
                userName: ''
            }
            this.checkAll = false
            this.checkedCities = []
            this.adminRole = ''
            this.cities = []
        },
        async radioChange(ree) {
            console.log(this.adminRole, ree)
            this.cities = []
            try {
                const result = await Product.getProductsByUserId({
                    userId: this.adminRole
                })
                if (result.success) {
                    console.log(result.data)
                    this.cities = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                // this.$message.error('服务器异常')
            }
        },
        async confirmUnbundling() {
            console.log(this.checkedCities)
            if (this.checkedCities && this.checkedCities.length > 0) {
                try {
                    const result = await Product.deleteByUserId({
                        ids: this.checkedCities,
                        userId: this.adminRole
                    })
                    if (result.success) {
                        this.$message.success(result.message)
                        this.unbundlingRelevant = false
                        this.checkedCities = []
                        this.cities = []
                        this.adminRole = ''
                        this.searchName = ''
                        this.getCategory()
                    } else {
                        this.unbundlingRelevant = false
                        this.checkedCities = []
                        this.cities = []
                        this.adminRole = ''
                        this.searchName = ''
                        this.getCategory()
                        this.$message.error(result.message)
                    }
                } catch (err) {
                // this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('请选择人员和产品')
                return
            }
            // this.unbundlingRelevant = false
        },
        reset() {
            // this.getCategory()
            this.productvalue = []
        },

        /**
     * @description: 删除选中列表的某一个
     * @param {Object} tag
     */
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
        },
        handleCloses(tag) {
            this.UserGetAllUser.splice(this.UserGetAllUser.indexOf(tag), 1)
        },
        /**
     * @description: 点击查看
     * @param {Number} index 索引
     */
        async toView(val) {
            // console.log(index)
            // console.log(this.ProductSetGetAllList[index])
            this.relevantPersonnelFour = true
            this.staffList = []
            try {
                const result = await Product.GetListItemAsync({ id: val })
                if (result.success) {
                    // console.log(result.data)
                    this.staffList = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description: 获取人员数据
     */
        async getUserList() {
            try {
                const result = await User.UserGetAllUserAsync()
                if (result.success) {
                    this.userTableData = result.data
                    this.totalPage = this.userTableData.length / this.pageSize
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 获取产品数据
     */
        async getProductList() {
            try {
                const result = await Product.ProInsertAsync()
                if (result.success) {
                    // console.log(result.data)
                    this.productList = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 删除弹出框
     * @param {Number} index 索引值
     * @param {Object} _modalInfo 删除弹出框信息
     */
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(
                _modalInfo.type,
                _modalInfo.tipInfo,
                _modalInfo.btnText,
                () => {
                    this.$refs.CommonDialog.OnHandleCancel()
                    this[_modalInfo.callBack](index)
                }
            )
        },

        /**
     * @description: 获取所有数据
     */
        async getCategory() {
            this.ProductSetGetAllList = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中。。。',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })

            try {
                const result = await Product.ProductSetGetAllListAsync(
                    this.productvalue
                )
                if (result.success) {
                    console.log(result.data)
                    this.ProductSetGetAllList = result.data
                    this.$nextTick(() => {
                        loading.close()
                    })
                } else {
                    this.$nextTick(() => {
                        loading.close()
                    })
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$nextTick(() => {
                    loading.close()
                })
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 删除某条数据
     * @param {String} _id id
     * @return {*}
     */
        async clickDelete(_id) {
            const uuid = _id
            try {
                const result = await Product.ProductSetDeleteAsync({ id: uuid })
                if (result.success) {
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        getRowKeys(row) {
            return row.id
        },

        /**
     * @description: 点击添加数据
     */
        async onAdd() {
            if (this.UserGetAllUser.length > 0 && this.ProductListTwo.length > 0) {
                const userId = []
                for (const item of this.UserGetAllUser) {
                    userId.push(item.id)
                }
                const productvalue = []
                for (const item of this.ProductListTwo) {
                    productvalue.push(item.id)
                }
                const sss = {
                    productIds: productvalue,
                    userIds: userId
                }
                try {
                    const result = await Product.ProductSetInsertBatchAsync(sss)
                    if (result.success) {
                        this.getCategory()
                        this.deladdRelevant = false
                        this.multipleSelectionTwoCopy = []
                        this.multipleSelectionOneCopy = []
                        this.multipleSelectionThreeCopy = []
                        this.UserGetAllUser = []
                        this.ProductListTwo = []
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('请选择产品名称或相关人员')
            }
        },

        /**
     * @description: 编辑保存数据
     * @param {Number} index 索引
     */
        async Save() {
            this.currentPage = 1
            const index = this.Expansion
            // console.log('eeeeeeee')
            const arr = this.ProductSetGetAllList[index]
            console.log(arr)
            console.log(this.multipleSelectionTwoCopy)
            console.log(this.dynamicTags)
            const userId = []
            for (const item of this.dynamicTags) {
                userId.push(item.id)
            }
            const sss = {
                id: arr.id,
                productId: arr.productId,
                userIds: userId
            }
            console.log(sss)
            try {
                const result = await Product.ProductSetUpdateAsync(sss)
                if (result.success) {
                    this.getCategory()
                    this.multipleSelectionTwoCopy = []
                    this.multipleSelectionOneCopy = []
                    this.UserGetAllUser = []
                    this.bianjiRelevant = false
                    this.Expansion = ''
                } else {
                    this.getCategory()
                    this.multipleSelectionTwoCopy = []
                    this.multipleSelectionOneCopy = []
                    this.UserGetAllUser = []
                    this.bianjiRelevant = false
                    this.Expansion = ''
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.getCategory()
                this.multipleSelectionTwoCopy = []
                this.multipleSelectionOneCopy = []
                this.UserGetAllUser = []
                this.bianjiRelevant = false
                this.Expansion = ''
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 打开所有产品数据弹出框
     */
        clickAddData() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.search = ''
            // this.getProductList().then(() => {
            this.relevantPersonnelThree = true
            // this.$refs.plTable.reloadData(this.productList)
            loading.close()
            if (this.ProductListTwo.length != 0) {
                const data = this.ProductListTwo
                data.forEach((element) => {
                    const index = this.productList.findIndex((_item) => {
                        return _item.id == element.id
                    })
                    this.$nextTick(() => {
                        this.$refs.multipleSelectionThree.toggleRowSelection(
                            this.productList[index]
                        )
                    })
                })
            }
            // })
        },

        /**
     * @description: 勾选产品数据
     * @param {Array} _val 产品数据
     */
        handleSelectionChangeThree(_val) {
            this.multipleSelectionThreeCopy = _val
        },

        /**
     * @description: 产品数据弹出框 取消按钮
     */
        cancelThree() {
            this.$refs.multipleSelectionThree.clearSelection()
            this.relevantPersonnelThree = false
            this.multipleSelectionThreeCopy = []
        },

        /**
     * @description: 产品数据弹出框 确认按钮
     */
        confirmThree() {
            if (this.multipleSelectionThreeCopy.length != 0) {
                this.relevantPersonnelThree = false
                this.ProductListTwo = this.multipleSelectionThreeCopy
                this.$refs.multipleSelectionThree.clearSelection()
            } else {
                this.$message.error('请添加相关产品')
            }
        },

        /**
     * @description: 打开  添加相关人员弹出框
     */
        ClickAdd() {
            this.queryinfo.pageIndex = 1
            this.relevantPersonnelOne = true
            this.onSearch()
        },

        /**
     * @description: 勾选添加相关人员
     * @param {Array} val 人员列表
     */
        handleSelectionChangeOne(val) {
            this.multipleSelectionOneCopy = val
        },

        /**
     * @description: 取消添加相关人员
     */
        cancelOne() {
            this.$refs.multipleSelectionOnes.clearSelection()
            this.relevantPersonnelOne = false
            this.multipleSelectionOneCopy = []
            this.$refs['SelectConditionForm'].resetFields()
        },

        /**
     * @description: 确认添加相关人员
     */
        confirmOne() {
            this.currentPage = 1
            this.relevantPersonnelOne = false
            this.UserGetAllUser = this.multipleSelectionOneCopy
            this.$refs.multipleSelectionOnes.clearSelection()
            this.$refs['SelectConditionForm'].resetFields()
        },

        /**
     * @description: 打开  编辑相关人员弹出框
     * @param {Number} index 索引
     */
        async clickBian(val, index) {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.Expansion = index
            try {
                const result = await Product.GetListItemAsync({ id: val })
                if (result.success) {
                    loading.close()
                    this.bianjiRelevant = true
                    this.dynamicTags = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description: 编辑相关人员
     * @param {Array} val 人员列表
     */
        handleSelectionChangeTwo(val) {
            this.multipleSelectionTwoCopy = val
        },

        /**
     * @description: 取消编辑相关人员
     */
        cancelTwo() {
            this.$refs.multipleSelectionTwotr.clearSelection()
            this.relevantPersonnelTwo = false
            this.$refs['SelectConditionForms'].resetFields()
            this.multipleSelectionTwoCopy = []
        },

        /**
     * @description: 确认编辑相关人员
     */
        confirmTwo() {
            this.relevantPersonnelTwo = false
            this.dynamicTags = this.multipleSelectionTwoCopy
            this.$refs.multipleSelectionTwotr.clearSelection()
            this.$refs['SelectConditionForms'].resetFields()
        },
        clickDeletes(_index, _type) {
            this[_type].splice(_index, 1)
        }
    }
}
</script>
<style scoped lang="less">
.searchNameClass {
  width: 100%;
  height: 55px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0px 30px;
}
.radioGroup {
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #dcdfe5;
  width: 100%;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-radio {
  width: 100%;
}
.el-checkbox {
  width: 100%;
}
::v-deep .el-dialog__footer {
  height: 70px;
}
.buttonStyle {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.buttonStyles {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  margin-top: 0 !important;
}
.buttonStyleMin {
  padding: 5px 10px;
  color: #ffffff;
  background: #3579e0;
}
.relevantPerson {
  width: 100%;
  height: 405px;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 2px 20px 0px rgba(21, 32, 41, 0.22);
  border-radius: 5px;
  .relevantPersonInput {
    width: 270px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-top: 10px;
  }
  .sousuo {
    width: 100px;
    height: 40px;
    background: #3579e0;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .relevantPersonInputCen {
    width: 100%;
    height: 254px;
    background: #f7f7f7;
    opacity: 0.7;
    border: 1px solid #000;
    border-radius: 5px;
    overflow-y: auto;
  }
  .relevantPersonInputBot {
    button {
      width: 138px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #bfbfbf;
      border-radius: 15px;
      margin-top: 20px;
    }
    .relevantPersonCan {
      margin-left: 220px;
    }
    .relevantPersonCon {
      margin-left: 30px;
      color: #ffffff;
      background: #3579e0;
    }
  }
}
.topBtns {
  float: right;
}
.buttonStyles {
  width: 100px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.addBtns {
  float: right;
  width: 100px;
  margin-right: 5%;
  margin-bottom: 20px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.addBtnInside {
  margin-top: 15px;
  width: 100px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.container {
  // height: 815px;
  margin: 30px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 0 30px;
  position: relative;
  .container-headers {
    padding: 30px;
    position: sticky;
    background-color: #ffffff;
    border-bottom: 1px solid #c8cdd5;
    z-index: 1;
    top: 0;
    .containerName {
      border-bottom: 1px solid #c8cdd5;
      padding-bottom: 10px;
      p {
        display: inline-block;
      }
      .productName {
        margin-left: 30px;
        float: left;
      }
      .personnel {
        margin-left: 400px;
        float: left;
      }
    }
    .addData {
      height: 30px;
    }
  }

  .containerButtom {
    // height: 580px;
    padding: 10px 30px;
    overflow-y: auto;
    background-color: white;
    overflow-x: hidden;
    .containerButtomList {
      margin-top: 10px;
      height: 180px;
      line-height: 30px;
      position: relative;
      border-bottom: 1px solid #c8cdd5;
    }
    .el-input {
      width: 90%;
    }
    .containerButtomListCenter {
      width: 90%;
      height: 162px;
      background: #ffffff;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      display: inline-block;
      vertical-align: top;
      padding: 20px;
      box-sizing: border-box;

      overflow: auto;
      p {
        border-radius: 30px;
        display: inline-block;
        margin-left: 2px;
      }
    }
  }
  .el-button {
    float: right;
    margin-right: 10px;
    //   margin-top: 10px;
  }
  .el-select {
    width: 60%;
  }
}
::v-deep .el-table__body-wrapper {
  overflow-y: auto;
}
.addDiv {
  height: 800px;
  .yixuan {
    margin-left: 5%;
  }
  .addDivTop {
    height: 730px;
    .addDataLeftList {
      width: 90%;
      margin: 0 auto;
      height: 670px;
      background: #f7f7f7;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      overflow-y: auto;
      font-size: 14px;
      span {
        margin-left: 7px;
        display: inline-block;
      }
    }
  }
}
.addDataLeftList {
  width: 90%;
  margin: 0 auto;
  height: 450px;
  background: #f7f7f7;
  border: 1px solid #dcdfe5;
  border-radius: 5px;
  overflow-y: auto;
  padding: 5px;
  font-size: 14px;
  span {
    margin-left: 7px;
    display: inline-block;
  }
}
.el-icon-circle-close {
  color: #f56c6c;
}
.el-icon-circle-close:hover {
  color: #a30d0d;
}
.paginationClock {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
}
.modal-dept {
  display: flex;
  justify-content: space-around;
  .modal-bottom {
    width: 48%;
  }
  .modal-top {
        min-height: 250px;
    width: 48%;

  }
}
::v-deep .el-card__body{
        padding: 0;
    }
.modal-dept-add {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  .modal-bottom {
    display: flex;
    justify-content: space-around;
    .left {
      width: 48%;
    }
    .right {
      width: 48%;
    }
  }
  .modal-top {
      min-height: 200px;
    .left {
      width: 48%;
    }
    .right {
      width: 48%;

    }
    display: flex;
    justify-content: space-around;
  }
}

::v-deep .disableheadselection > .cell .el-checkbox__inner {
  display: none;
}
.tags_box{
    padding: 0;
    min-height: 30px;
    .el-tag{
        margin: 3px 10px;
    }
}
::v-deep .el-card{
    min-height: 80px;
}
::v-deep .el-card__header{
    padding: 5px 8px;
}
::v-deep .el-empty__image{
    width: 37px;
}
 ::v-deep  .el-pagination{
    white-space: normal;
}
 ::v-deep  .el-pagination__jump{
   margin-left: 2px;
}
</style>
